<!--
 * @Author: wangjianwhy wangjianwhy@sina.com
 * @Date: 2024-10-04 16:43:13
 * @LastEditors: wangjianwhy wangjianwhy@sina.com
 * @LastEditTime: 2024-12-09 11:22:56
 * @FilePath: \my-vue3-appg:\vscode-work\tlo-shopping\src\views\mall\ProductDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE 
-->
<template>
<router-view></router-view>
<!--商品图片与返回分享-->
<ProductSlideshow :shopId="shopId" />

<div class="cards">
    <!-- 商品 -->
    <div class="shop-card">
        <div class="card-money">
            <div class="money-font">￥9999.99</div>
            <label class="xl-font">销量: 30.1万</label>
        </div>
        <div class="card-title">
            <div class="big-font">我的家在东北/松花江上呐/那里有红豆高粱大豆玉米呀/咿呀咿呀哟</div>
            <div @click="toggleFavorite" class="wujiaoxing">
                <span v-if="isFavorite" class="filled">&#9733;</span>
                <span v-else class="empty">&#9734;</span>
                <div class="sc">收藏</div>
            </div>
            <div class="tag-ul">
                <ul>
                    <li>金刚不坏</li>
                    <li>阿里个头</li>
                    <li>屁股开花</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 优惠 -->
    <div class="shop-card" @click="openPreferential">
        <div class="preferential-title">优惠</div>
        <div class="preferential-content">
            2024年海尔洗衣机电机延长....（以提交订单为准）
            <label style="color: #b2b2b2; font-size: 10px; float: right;">❯</label>
        </div>
    </div>

    <!-- 已选/送货/运费 -->
    <div class="shop-card">
        <div class="selected-shop">
            <div class="selected-title">已选</div>
            <div class="selected-content">
                KDC D3F，1件
                <label style="color: #b2b2b2; font-size: 10px; float: right;">❯</label>
            </div>
        </div>
        <hr />
        <div class="selected-address">
            <div class="selected-title">送至</div>
            <div class="selected-content"><img src="/src/assets/icons/location.png" />
                广东 广州 番禺区 东环街道
                <label style="color: #b2b2b2; font-size: 10px; float: right;">❯</label>
            </div>
        </div>
        <hr />
        <div class="selected-waybill">
            <div class="selected-title">运费</div>
            <div class="selected-content">
                包邮
            </div>
        </div>
    </div>

    <!-- 门店 -->
    <div class="shop-card">
        <div class="room-shop">
            <div class="room-title">门店</div>
            <div class="room-content">
                <img src="/src/assets/icons/dp.jpeg" />
                [附近] xxx门店名称
                <p>广东省广州市番禺区东环街道天安节能科技园22号楼</p>
            </div>
        </div>
    </div>

    <!-- 商品评价 -->
    <div class="shop-card" id="evalu">
        <div class="shop-evalu">
            <div class="evalu-title">
                <font>商品评价(100)</font>
                <a @click="shopEvalu">100% 好评 ❯</a>
            </div>
            <div class="evalu-content">
                <div class="evalu-name">
                    <img src="/src/assets/icons/ren.jpeg" />
                    <font style="float: left;">zhangsan</font>
                    <div style="color: darkgrey; font-size: 12px; float: right">2024.10.09</div>
                </div>
                <div class="evalu-text">
                    定义一个响应式变量，用于存储当前显示图片的索引，假设我们简单地通过加一来切换到下一张图片，如果超出数组长度则回到第一张
                </div>
            </div>
            <div class="evalu-content">
                <div class="evalu-name">
                    <img src="/src/assets/icons/ren.jpeg" />
                    <font style="float: left;">zhangsan</font>
                    <div style="color: darkgrey; font-size: 12px; float: right">2024.10.09</div>
                </div>
                <div class="evalu-text">
                    定义一个响应式变量，用于存储当前显示图片的索引，假设我们简单地通过加一来切换到下一张图片，如果超出数组长度则回到第一张
                </div>
            </div>
            <div><button @click="shopEvalu" class="more-button">查看全部评价</button></div>
        </div>
    </div>

    <!-- 问答专区 -->
    <div class="shop-card">
        <div class="shop-wenda">
            <div class="wenda-title">
                <font>问答专区(10)</font>
                <div class="wenda-more" @click="wendaMethod">❯</div>
            </div>
            <div class="wenda-msg">
                <label class="icon">问</label>
                <label class="msg">dfadfasdfasdfasd</label>
                <label class="huida">2个回答</label>
            </div>
            <div class="wenda-msg">
                <label class="icon">问</label>
                <label class="msg">dfadfasdfasdfasd</label>
                <label class="huida">2个回答</label>
            </div>
            <div class="wenda-msg">
                <label class="icon">问</label>
                <label class="msg">dfadfasdfasdfasd</label>
                <label class="huida">99+个回答</label>
            </div>
            <div style="margin-top: 5px;"><button class="more-button" @click="wendaMethod">查看全部10条问题</button></div>
        </div>
    </div>
</div>

<!-- 商品介绍与规格参数和安装售后等 -->
<DetailsAndSpec :shopId="shopId" />

<!--底部：加入购物车和立即购买-->
<BuyShopping />

<!--优惠与权益的弹框-->
<PreferentialOffer :isVisible="isPreferentialVisible" @close="closePreferential" />

<!--推荐好物-->
<div class="shop-card" id="recommend">
    <div class="haowu">
        好物
    </div>
</div>

</template>

<script setup>
import ProductSlideshow from '@/components/product/ProductSlideshow.vue';
import { useRoute } from 'vue-router';
import { ref } from 'vue';
import BuyShopping from '@/components/product/BuyShopping.vue';
import PreferentialOffer from './PreferentialOffer.vue';
import DetailsAndSpec from './DetailsAndSpec.vue';


const route = useRoute();
const shopId = ref(route.query.id);

const isFavorite = ref(false);
//收藏
function toggleFavorite() {
  isFavorite.value = !isFavorite.value;
  if(isFavorite.value){
    alert('收藏成功');
  } else {
    alert('取消收藏');
  }
}

alert("商品ID：" + shopId.value);
// 使用 watch 监听 route.params.id 的变化
// watch(() => route.params.id, (newId) => {
//     shopId.value = newId; // 更新 productId
// });
// onMounted 确保组件挂载后获取 productId
// onMounted(() => {
//   if (route.params.id) {
//     shopId.value = route.params.id;
//   } else {
//     console.error("未找到商品 ID");
//   }
// });

//优惠 控制优惠详情框的显示状态
const isPreferentialVisible = ref(false);
// 打开优惠详情框的方法
const openPreferential = () => {
    isPreferentialVisible.value = true;
};
// 关闭优惠详情框的方法
const closePreferential = () => {
    isPreferentialVisible.value = false;
};

//商品详情页
const shop = ref({
    id: 1,
    imgList: ["../../assets/lunbo/image1.jpeg", "../../assets/lunbo/image2.jpeg", "../../assets/lunbo/image3.jpeg"],
    title: 'Haier/海尔 定频双开门冰箱 BCD-118TMPA',
    brandType: '电视',
    brandName: '小米',
    subBrandName: 'S Pro Mini LED',
    content: '阿西吧',
    createDate: '2024-10-01',
    tags: ["上冷冻下冷藏", "全钢材质", "结实耐用"],
    activePrice: 3200.00,
    price: 7200.99,
    evalCount: 1000,
    evalRate: 100,
    salesVol: '30.1万',
    isCollect: false,
    selectedShop: ["BCD-118TMPA","119-TKM"],
    toAddress: "广东省广州市番禺区东环街道天安节能科技园22号楼",
    freight: 0,//0为包邮
    roomShop: "广东省广州市番禺区敏捷广州红星美凯龙001号店",
    shopGuide: "张三",
    guideTel: 13300001111,
    guideTag: "金牌导购",
    guideOnline: true
});
console.log("详情页", shop);

//商品评价
const evalu = ref({
     icon: "",
     username: "zhangsan",
     content: "这款用了半个月,没有什么噪音,就是电机工作一会儿响一会儿的",
     shopId: 1,
     createDate: '2024-10-08 14:20:00'
});
console.log(evalu);

//商品的问答
const wenda = ref({
    quePerson: "zhangsan",
    question: "噪音大不大?",
    ansPerson: "wangwu",
    answers: "还不错,这款的噪音非常小.",
    shopId: 1,
    createDate: '2024-10-08 14:20:00'
});
console.log(wenda);
const wendaMethod = () => {
    alert("问答专区展开所有回答");
}

//优惠
const preferent = ref([
    {
        name: "买即送",
        rule: "先到先得(以提交订单为准)",
        equity: "2024年冰箱压缩机延长至10年 卡萨帝品牌专享权益八"
    },{
        name: "可选权益",
        rule: "以下权益与其他权益不可同享(以提交订单为准)",
        equity: "冰箱2024年卡萨帝积分权益1"
    }
]);
console.log(preferent);

//商品介绍,sourceType资源类型,1图片,2视频
const shopIntro = ref([
    {
        sourceUrl: "../../assets/lunbo/image1.jpeg",
        sourceType: 1,
        shopId: 1,
        createDate: "2024-10-08 14:20:00",
        sort: 9,
        id: 11
    },{
        sourceUrl: "../../assets/lunbo/image1.jpeg",
        sourceType: 1,
        shopId: 1,
        createDate: "2024-10-08 14:20:00",
        sort: 7,
        id: 12
    },{
        sourceUrl: "../../assets/lunbo/image1.jpeg",
        sourceType: 2,
        shopId: 1,
        createDate: "2024-10-08 14:20:00",
        sort: 8,
        id: 10
    }
]);
console.log(shopIntro);

//规格参数
const shopSpec = ref({
    shopTypeName: "滚筒洗衣机",
    shopId: 2,
    xidiCapac: 10,
    tuoshuiCapca: 10,
    color: "西兰青",
    showType: "LED",
    eelevel: "一级",//一级能效
    xidiSort: "智慧洗,速洗,强力吸,家访,衬衣",
    makeDomain: "支持",//预约功能
    childrenLock: "支持"//童锁
});
console.log(shopSpec);

const shopEvalu = () => {
    alert("打开所有评价");
}

</script>

<style scoped>
.cards {
    width: 95%;
    background-color: #f2f2f2;
    margin: auto;
    height: auto;
}

.shop-card {
    margin: 2% auto;
    border-radius: 10px;
    background-color: #ffffff;
    height: auto;
}
/*临时区域好物*/
.haowu {
    margin: auto;
    border: 1px solid red;
    width: 95%;
    margin-bottom: 50px;
    height: 500px;
}
/*商品*/
.shop-card .card-money {
    height: 30px;
    margin: auto;
}
.shop-card .card-title {
    height: 90px;
    margin: auto;
}
.money-font {
    float: left;
    font-size: 20px;
    font-weight: 1000;
    color: red;
    height: 30px;
    width: 60%;
    text-align: left;
    padding-left: 2px;
}
.xl-font {
    float: right;
    font-size: 12px;
    padding-top: 5px;
    width: 38%;
    text-align: right;
    margin-right: 2px;
}
.big-font {
    float: left;
    font-size: 18px;
    font-weight: 1000;
    text-align: left;
    width: 85%;
}
/*收藏*/
.wujiaoxing {
    background-color: transparent;
    width: 10%;
    height: auto;
    cursor: pointer;
    padding: 0px;
    float: right;
}
.wujiaoxing .filled {
    color: orange; /* 实心五角星的黄色 */
    margin: 0px;
    padding: 0px;
    
}
.wujiaoxing .empty {
    color: #ccc; /* 空心五角星的灰色 */
    margin: 0px;
    padding: 0px;
}
.wujiaoxing .sc {
    font-size: 10px;
    margin-top: -5px;
}
.tag-ul ul{
    list-style: none;
    font-size: 10px;
    float: left;
    width: 100%;
    padding-left: 0px;
}
.tag-ul ul li{
    float: left;
    margin: 0px 5px;
    border-radius: 15px;
    background-color: darkgrey;
}

/*优惠*/
.preferential-title {
    font-weight: bold;
    font-size: 14px;
    width: 16%;
    float: left;
    margin: 5px 0px;
}
.preferential-content {
    font-size: 9px;
    width: 95%;
    height: 25px;
    margin: 2px 0px;
    padding-top: 8px;
    text-align: left;
}

/*已选/送至/运费*/
hr {
    float: right;
    width: 90%;
    color: darkgrey;
}
.selected-title {
    font-weight: bold;
    font-size: 14px;
    width: 16%;
    float: left;
}
.selected-content {
    text-align: left;
    font-size: 14px;
    width: 95%;
}
.selected-content img {
    width: 11px;
    height: 13px;
}
.selected-shop {
    height: 20px;
    margin-top: 5px;
    padding-top: 10px;
}
.selected-address {
    height: 20px;
    padding: 2px 0px;
}
.selected-waybill {
    height: 60px;
    padding: 2px 0px;
}

/*门店*/
.room-shop {
    font-size: 14px;
    width: 100%;
    margin-top: 5px;
    padding: 2px 0px;
    height: 60px;
}
.room-shop img {
    width: 13px;
    height: 13px;
}
.room-title {
    padding: 2px 0px;
    width: 16%;
    font-weight: bold;
    float: left;
}
.room-content {
    text-align: left;
    font-size: 14px;
    width: 80%;
    float: right;
}
.room-content p {
    color: darkgrey;
    font-size: 12px;
}

/*商品评价*/
.shop-evalu {
    height: auto;
    overflow: hidden;
}
.shop-evalu .evalu-title {
    width: 95%;
    margin: auto;
    height: 30px;
}
.evalu-title font {
    font-size: 14px;
    font-weight: bold;
    float: left;
    margin: 5px 0px;
}
.evalu-title a {
    color: darkgrey;
    font-size: 12px;
    float: right;
    margin: 5px 0px;
}
.shop-evalu .evalu-content {
    width: 95%;
    margin: auto;
    margin-top: 5px;
}
.evalu-content img {
    width: 20px;
    height: 20px;
    float: left;
    border-radius: 50%;
    margin-right: 5px;
}
.evalu-content .evalu-name {
    height: 30px;
    margin: auto;
}
.evalu-content .evalu-text {
    height: auto;
    text-align: left;
    margin-bottom: 10px;
    font-size: 14px;
}

/*button的按钮*/
.more-button {
    border-radius: 50px;
    background-color: transparent;
    color: deepskyblue;
    border: 1px solid deepskyblue;
    height: 35px;
    font-size: 14px;
    margin: auto;
    margin-bottom: 10px;
}

/*问答专区*/
.shop-wenda {
    height: 150px;
    width: 95%;
    margin: auto;
}
.shop-wenda .wenda-title {
    height: 30px;
    width: 100%;
}
.shop-wenda font {
    font-size: 14px;
    font-weight: bold;
    float: left;
    margin: 5px 0px;
}
.shop-wenda .wenda-more {
    color: darkgrey;
    font-size: 14px;
    float: right;
    cursor: pointer;
    width: 15px;
    height: 20px;
}
.shop-wenda .wenda-msg {
    width: 100%;
    font-size: 14px;
    margin-top: 5px;
    height: 20px;
}
.wenda-msg .icon {
    background-color: coral;
    color:#f2f2f2;
    padding: 0px 2px;
    border-radius: 5px;
    font-size: 12px;
    float: left;
}
.wenda-msg .msg {
    float: left;
    margin-left: 3px;
    width: 74%;
    text-align: left;
}
.wenda-msg .huida {
    color: darkgrey;
    float: right;
    width: 20%;
    text-align: right;
    font-size: 13px;
}
</style>
